<template>
  <splitpanes class="default-theme">
    <pane size="15" :min-size="0" max-size="100">
      <table-table ref="tabelRef" :lab-db="labDb"  @rowClick="selectTable" @rowSelect="selectTable" :select="select"></table-table>
    </pane>
    <pane size="85" :min-size="0" max-size="100">
      <h3 v-if="tabs.length === 0">未打开数据表</h3>
      <el-tabs v-else v-model="activeName" closable type="border-card" @tab-remove="removeTab">
        <el-tab-pane v-for="item in tabs" :key="item.key" :name="item.key" :label="item.jdbcName">
          <table-info :lab-db="labDb" :jdbc-table="item" :select="select" @refresh="() => {$refs.tabelRef.loadSource()}"></table-info>
        </el-tab-pane>
      </el-tabs>
    </pane>
  </splitpanes>
</template>

<script>
import { Splitpanes, Pane } from 'splitpanes'
import '@/theme/splitpanes.css'
import DbTable from "@/views/system/db/DbTable";
import TableTable from "@/views/system/db/TableTable";
import TableInfo from "@/views/system/db/TableInfo";
export default {
  name: "TableManage",
  components: {TableInfo, TableTable, DbTable, Splitpanes, Pane},
  props: {
    labDb: {
      type: Object,
      default: function () {
        return {}
      }
    },
    select: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      tabs: [],
      activeName: ''
    }
  },
  methods: {
    selectTable(row) {
      if (!row.key) {
        row.key = row.jdbcName || this.$Util.uuid(6)
      }
      const index = this.tabs.findIndex(item => item.key === row.key || row.jdbcName === item.jdbcName)
      if (index < 0) {
        this.tabs.push(row)
      }
      this.activeName = row.key
    },
    removeTab(key) {
      this.tabs = this.tabs.filter(tab => tab.key !== key)
      if (this.tabs.length > 0) {
        this.activeName = this.tabs[0].key
      }
    }
  }
}
</script>

<style scoped>

</style>
